<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link rel="stylesheet" href="/js/elementui/index.css">
    <link rel="icon" href="data:;base64,=">
    <style>
        .login_box{
            width: 500px;
            height: 400px;
            margin:100px auto;
        }
    </style>
</head>
<body>
<div id="app" class="login_box">
    <el-card >
        <div slot="header" class="clearfix">
            <span>用户登录</span>
        </div>
        <div>
            <span th:if="${param.error}" style="color: red">账号或密码错误</span>
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="账号">
                    <el-input v-model="form.username"></el-input>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input type="password" v-model="form.password"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="login">提交</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="dialogUserVisible = true">注册用户</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="dialogFormVisible = true">注册公司</el-button>
                </el-form-item>
            </el-form>
        </div>
    </el-card>
    <el-dialog title="注册用户" :visible.sync="dialogUserVisible" @close="closeMyUserDialog">
        <el-form :model="user">
            <el-form-item label="用户名" :label-width="formLabelWidth">
                <el-input v-model="user.username"  autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="用户真名" :label-width="formLabelWidth">
                <el-input v-model="user.realName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="用户密码" :label-width="formLabelWidth">
                <el-input v-model="user.password" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="用户图片" :label-width="formLabelWidth">
                <el-upload
                        class="avatar-uploader"
                        action="/upload"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess">
                    <img style="width: 100px;height: 100px" v-if="user.userImage" :src="user.userImage" class="avatar"/>
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
            <el-form-item label="用户电话" :label-width="formLabelWidth">
                <el-input v-model="user.userTel" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="用户所在公司" :label-width="formLabelWidth">
                <el-select v-model="user.companyId" placeholder="请选择">
                    <el-option
                            v-for="item in companys"
                            :label="item.companyName"
                            :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogUserVisible = false">取 消</el-button>
            <el-button type="primary" @click="saveUser()">确 定</el-button>
        </div>
    </el-dialog>
    <el-dialog title="公司信息管理" :visible.sync="dialogFormVisible" @close="closeMyDialog">
        <el-form :model="company">
            <el-form-item label="公司名" :label-width="formLabelWidth">
                <el-input v-model="company.companyName"  autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="公司所在省份" :label-width="formLabelWidth">
                <el-select
                        @change="getCompanyCity" v-model="company.companyProvince" placeholder="请选择省份">
                    <el-option
                            v-for="item in company_province"
                            :key="item"
                            :label="item"
                            :value="item"
                    >
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="公司所在城市" :label-width="formLabelWidth">
                <el-select @change="getCompanyArea" v-model="company.companyCity" placeholder="请选择城市">
                    <el-option
                            v-for="item in company_city"
                            :key="item"
                            :label="item"
                            :value="item"
                    >
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="公司所在区" :label-width="formLabelWidth">
                <el-select v-model="company.companyArea" placeholder="请选择地区">
                    <el-option
                            v-for="item in company_area"
                            :key="item"
                            :label="item"
                            :value="item"
                    >
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="公司具体地址" :label-width="formLabelWidth">
                <el-input v-model="company.companyAddress" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="主要营业" :label-width="formLabelWidth">
                <el-input v-model="company.businessScope" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="公司照片" :label-width="formLabelWidth">
                <el-upload
                        class="avatar-uploader"
                        action="/upload"
                        :show-file-list="false"
                        :on-success="handleCompanySuccess">
                    <img style="width: 100px;height: 100px" v-if="company.companyImage" :src="company.companyImage" class="avatar"/>
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
            <el-form-item label="联系人" :label-width="formLabelWidth">
                <el-input v-model="company.legal" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="联系电话" :label-width="formLabelWidth">
                <el-input v-model="company.legalTel" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="电子邮箱" :label-width="formLabelWidth">
                <el-input v-model="company.companyEmail" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="公司类型" :label-width="formLabelWidth">
                <el-input v-model="company.companyType" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="公司QQ" :label-width="formLabelWidth">
                <el-input v-model="company.companyQq" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="公司微信" :label-width="formLabelWidth">
                <el-input v-model="company.companyWechat" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="公司状态" :label-width="formLabelWidth">
                <el-radio v-model="company.companyStatus" label="on">营业</el-radio>
                <el-radio v-model="company.companyStatus" label="off">非营业</el-radio>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="saveCompany()">确 定</el-button>
        </div>
    </el-dialog>
</div>
<script src="/js/area/area.js"></script>
<script src="/js/vue/vue.js"></script>
<script src="/js/axios/axios.min.js"></script>
<script src="/js/qs/qs.min.js"></script>
<script src="/js/elementui/index.js"></script>
<script>
    new Vue({
        el:"#app",
        data(){
            return{
                company_province:[],
                company_city:[],
                company_area:[],
                form:{
                    username:"",
                    password:""
                },company:{
                    companyName:'',
                    legal:'',
                    legalTel:'',
                    companyEmail:'',
                    companyQq:'',
                    companyWechat:'',
                    companyType:'',
                    businessScope:'',
                    companyProvince:'',
                    companyCity:'',
                    companyArea:'',
                    companyAddress:'',
                    companyImage:'',
                    companyStatus:'',
                },
                user:{
                    username:'',
                    password:'',
                    realName:'',
                    userTel:'',
                    userImage:'',
                },
                dialogFormVisible:false,
                dialogUserVisible:false,
                formLabelWidth:"120px",
                companys:null,
            }
            },
        methods:{
            login(){
                //将JSON转换为表单格式 username=xxx&password=xxx
                axios.post("/login",Qs.stringify(this.form))
                    .then(value => {
                    location.href = value.request.responseURL;
            });
            }, handleAvatarSuccess(res, file) {
                this.user.userImage ="http://192.168.31.100/images/"+res.data;
            },handleCompanySuccess(res,file){
                this.company.companyImage ="http://192.168.31.100/images/"+res.data;
            },
            saveUser(){
                    axios.post("/user",this.user).then(value => {
                        if(value.data.code == 1){
                        this.$message(value.data.msg);
                            location.reload();
                        }
                 });
                },
            closeMyDialog(){
                this.company={   //关闭对话框时更改product属性
                    companyName:'',
                    legal:'',
                    legalTel:'',
                    companyEmail:'',
                    companyQq:'',
                    companyWechat:'',
                    companyType:'',
                    businessScope:'',
                    companyProvince:'',
                    companyCity:'',
                    companyArea:'',
                    companyAddress:'',
                    companyImage:'',
                    companyStatus:'',
                }
            },closeMyUserDialog(){
                this.user={
                        id:'',
                        username:'',
                        password:'',
                        realName:'',
                        userTel:'',
                        userImage:'',
                }
            },
            saveCompany(){
                axios.post("/company",this.company).then(value => {
                    if(value.data.code == 1){
                    this.$message(value.data.msg);
                    location.reload();
                }
            });
            },getCompanyCity(){
                this.company.companyCity='';
                this.company_city=[];
                this.company.companyArea='';
                this.company_area=[];
                for (i of city){
                    if (this.company.companyProvince==i.name){
                        for(j of i.city){
                            this.company_city.push(j.name);
                        }
                    }
                }
            },getCompanyArea(){
                this.company.companyArea='';
                this.company_area=[];
                for ( i of city){
                    if (this.company.companyProvince==i.name){
                        for( j of i.city){
                            if (this.company.companyCity==j.name){
                                for( k of j.area){
                                    this.company_area.push(k);
                                }
                            }
                        }
                    }
                }
            },
            registerCompany(){
                axios.post("/user",this.user).then(value => {
                    if(value.data.code == 1){
                    this.$message(value.data.msg);
                        axios.get("/company").then(value => {
                            if(value.data.code==1){
                                this.companys=value.data.data;
                                location.reload();
                            }
                        })

                }

            });
        }
        },
        mounted(){
            for (i of city){
                this.company_province.push(i.name);
            }
            axios.get("/company").then(value => {
                if(value.data.code==1){
                    this.companys=value.data.data;
                    // console.log(this.companys);
                }
            })
        }
    })
</script>
</body>
</html>